<template>
  <div>
    <div>
      <el-form :model="paramsFormData" :rules="rules" ref="paramsFormData">
        <h4 v-if="page=='gee'">方法参数</h4>
        <h4 v-if="page!=='gee'">模型参数</h4>
        <el-form-item v-for="(value,key) in paramsFormData" :prop="key" :key="key" :label="paramsFormDataName[key]">
          <div v-if="form_list[key].datatype== 'Integer'">
            <span>
              <el-input v-model.number="paramsFormData[key]" :placeholder="'请输入'+paramsFormDataDescribe[key]"></el-input>
            </span>
          </div>
          <div v-else>
            <el-input ref="formInput" v-model="paramsFormData[key]"
                      :placeholder="'请输入'+paramsFormDataDescribe[key]"></el-input>
            <span style="float:right;" id="icon">
              <a @click="openFilePosition" v-if="form_list[key].in===0 & form_list[key].source==='fs'">
                <n3-icon type="folder-open" size="large"></n3-icon>
              </a>
              <a @click="openPosition" v-if="form_list[key].name.indexOf('空间范围')!==-1">
                <n3-icon type="map-marker" size="large" style="margin-left:-80%"></n3-icon>
              </a>
              <!--<a v-if="form_list[key].out===0" class="output">-->
                <!--<input id="outfile" name="file" type="file" @change="outFileChange" ref="outinputer">-->
                <!--<label for="outfile">-->
                  <!--<n3-icon type="folder-open-o" size="large"></n3-icon>-->
                <!--</label>-->
              <!--</a>-->
            </span>
          </div>
        </el-form-item>
        <span id="watch">
          <el-button v-if="page!=='gee'" type="success" @click="submit">提交</el-button>
          <el-button v-if="page=='gee'" type="success"  @click="commit">确定</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
      </span>
      </el-form>
    </div>
    <div>
    </div>
  </div>
</template>


<script>
  import Vue from 'vue';

  export default {
    name: "modelForm",
    data() {
      return {
        paramsFormData: {},
        paramsFormDataName: {},
        paramsFormDataDescribe: {},
        rules: {},
      }
    },
    components: {},
    props: {
      form_list: Array,
      artifactId: String,
      dialogVisible: Object,
      page:String,
      currentItemId:String
    },
    methods: {
      openPosition(e) {
        this.$Bus.$emit('positionVisible.v', true);
        let that = this;
        let string = $(e.target).parent().parent().siblings()[0].innerHTML;
        let matchStr=string.match(/请输入(\S*)"/)[1];
        this.$Bus.$on('coordinate',(params)=>{
          for(let i=0;i<=that.form_list.length;i++){
            if(that.form_list[i].description.indexOf(matchStr)!==-1){
              that.paramsFormData[i]=params;
              break;
            }
          }
        });
      },
      openFilePosition(e) {
        let that = this;
        this.$Bus.$emit('fileVisible.v', true);
        let string = $(e.target).parent().parent().siblings()[0].innerHTML;
        let matchStr=string.match(/请输入(\S*)"/)[1];
        this.$Bus.$on('fileData',(filePramas)=>{
          for(let i=0;i<=that.form_list.length;i++){
            if(that.form_list[i].description.indexOf(matchStr)!==-1){
              that.paramsFormData[i]=filePramas;
              break;
            }
          }
        });
      },
      outFileChange(e) {
        let outFileString = $(e.target).parent().parent().siblings()[0].innerHTML;
        let outMatchStr=outFileString.match(/请输入(\S*)"/)[1];
        console.log(outMatchStr)
        if (e.target.files.length > 0){
          for(let i=0;i<=this.form_list.length;i++){
            if(this.form_list[i].description.indexOf(outMatchStr)!==-1){
              this.paramsFormData[i]=e.target.files[0].name;
              break;
            }
          }
        }
      },
      reset() {
        this.$refs["paramsFormData"].resetFields();
      },
      submit() {
          let obj = this;
          this.$refs["paramsFormData"].validate((valid) => {
              if (valid) {
                  let modelparamData = {};
                  // modelparamData.user = "ubt";
                  let para = [];
                  for (let i = 0; i < Object.keys(obj.paramsFormData).length - 1; i++) {
                      para.push(obj.paramsFormData["" + (i + 1)])
                  }
                  modelparamData.params = para;
                  modelparamData.customname = this.paramsFormData["0"];
                  // console.log(modelparamData.customname = this.paramsFormData["0"]);
                  this.$axios.post(
                      // url: 'http://192.168.240.25:3000/dldsj/parallel/use/' + this.artifactId,
                      '/parallel/use/' + this.artifactId, modelparamData
                  ).then(function (response) {
                      if (response.code === 200) {
                          obj.$message({
                              type: 'success',
                              message: '模型提交成功!请前往模型项目查看运行进度！'
                          });
                      }
                  }).catch(function (error) {
                      obj.$message.error('模型提交失败!');
                  });
                  let visible = this.dialogVisible;
                  visible.v = false;
                  this.$emit("update:dialogVisible", visible);
              } else {
                  console.log('error submit!!');
                  return false;
              }
          })
      },
      commit(){
          let obj = this;
          this.$refs["paramsFormData"].validate((valid) => {
              if (valid) {
                  let para = [];
                  let paras = {};
                  for (let i = 0; i < Object.keys(obj.paramsFormData).length; i++) {
                      para.push(obj.paramsFormData["" + (i)] +"");
                  }
                  paras.artifactId = this.artifactId;
                  paras.taskId = this.currentItemId;
                  paras.params = para;
                  obj.$emit("getGeeParam",paras);
                  let visible = this.dialogVisible;
                  visible.v = false;
                  this.$emit("update:dialogVisible", visible);
              } else {
                  console.log('error submit!!');
                  return false;
              }
          })
      }
    },
    watch: {
      form_list: {
        handler: function (newValue, oldValue) {
          this.paramsFormData = {};
          this.paramsFormDataName = {};
          this.paramsFormDataDescribe = {};
          this.rules = {};
          for (let i = 0; i < newValue.length; i++) {
            let param = i;
            Vue.set(this.paramsFormData, param, "");
            this.paramsFormDataName[param] = newValue[i].name;
            this.paramsFormDataDescribe[param] = newValue[i].description;
            // console.log(newValue[i].name)
            this.rules[param] = [];
            let ruleMessage = {};
            let ruleRequire = {};
            if (newValue[i].datatype === 'Integer') {
              ruleRequire["type"] = 'number';
              ruleRequire["message"] = '参数必须为整数值';
              ruleMessage["required"] = true;
            } else if (newValue[i].name.indexOf('范围') !== -1) {
              ruleMessage["required"] = false;
            } else {
              ruleRequire["type"] = '';
              ruleRequire["message"] = '';
              ruleMessage["required"] = true;
            }
            ruleMessage["message"] = '请输入' + newValue[i].name;
            ruleMessage["trigger"] = 'blur';
            ruleRequire["trigger"] = 'blur';
            this.rules[param][0] = ruleMessage;
            this.rules[param][1] = ruleRequire;
          }
        }
      }
    },
    mounted() {
      // let that = this;
      // this.$Bus.$on('coordinate', (params) => {
      //   console.log(params);
      //   // that.$refs.formInput[1].value = params;
      //   that.paramsFormData[1] = params;
      // });
    },
    created(){
    }
  }
</script>

<style>
  .el-input {
    width: 95%;
  }

  #icon:hover {
    color: #409EFF;
  }

  .output input {
    font-size: 0;
    position: absolute;
    left: -999px;
  }

  .output label {
    left: 0;
    /*height: 30px;*/
    /*width: 30px;*/

  }
</style>
